<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两个半透明立方体</title>
    <script src="./common.js">  </script>
</head>

<body>
    <canvas id="webgl" width="500" height="500" style="background-color: #000000"></canvas>

    <script type="module">

        import { vertex, fragment } from './03TransCubeShader.js';


        let la = 0.4;
        let lb = 0.3;

        /**
     创建顶点位置数据数组data,Javascript中小数点前面的0可以省略
     **/
        var data = new Float32Array([
            //        立方体1
            la, la, la, -la, la, la, -la, -la, la, la, la, la, -la, -la, la, la, -la, la,      //面1
            la, la, la, la, -la, la, la, -la, -la, la, la, la, la, -la, -la, la, la, -la,      //面2
            la, la, la, la, la, -la, -la, la, -la, la, la, la, -la, la, -la, -la, la, la,      //面3
            -la, la, la, -la, la, -la, -la, -la, -la, -la, la, la, -la, -la, -la, -la, -la, la,//面4
            -la, -la, -la, la, -la, -la, la, -la, la, -la, -la, -la, la, -la, la, -la, -la, la,//面5
            la, -la, -la, -la, -la, -la, -la, la, -la, la, -la, -la, -la, la, -la, la, la, -la, //面6
            //        立方体2
            lb, lb, lb, -lb, lb, lb, -lb, -lb, lb, lb, lb, lb, -lb, -lb, lb, lb, -lb, lb,      //面1
            lb, lb, lb, lb, -lb, lb, lb, -lb, -lb, lb, lb, lb, lb, -lb, -lb, lb, lb, -lb,      //面2
            lb, lb, lb, lb, lb, -lb, -lb, lb, -lb, lb, lb, lb, -lb, lb, -lb, -lb, lb, lb,      //面2
            -lb, lb, lb, -lb, lb, -lb, -lb, -lb, -lb, -lb, lb, lb, -lb, -lb, -lb, -lb, -lb, lb,//面4
            -lb, -lb, -lb, lb, -lb, -lb, lb, -lb, lb, -lb, -lb, -lb, lb, -lb, lb, -lb, -lb, lb,//面2
            lb, -lb, -lb, -lb, -lb, -lb, -lb, lb, -lb, lb, -lb, -lb, -lb, lb, -lb, lb, lb, -lb //面6
        ]);

        var a1 = 0.6;
        var a2 = 0.6;

        /**
         创建顶点颜色数组colorData
         **/
        var colorData = new Float32Array([
            //        立方体1，透明度0.6
            1, 0, 0, a1, 1, 0, 0, a1, 1, 0, 0, a1, 1, 0, 0, a1, 1, 0, 0, a1, 1, 0, 0, a1,//红色——面1
            0, 1, 0, a1, 0, 1, 0, a1, 0, 1, 0, a1, 0, 1, 0, a1, 0, 1, 0, a1, 0, 1, 0, a1,//绿色——面2
            0, 0, 1, a1, 0, 0, 1, a1, 0, 0, 1, a1, 0, 0, 1, a1, 0, 0, 1, a1, 0, 0, 1, a1,//蓝色——面3

            1, 1, 0, a1, 1, 1, 0, a1, 1, 1, 0, a1, 1, 1, 0, a1, 1, 1, 0, a1, 1, 1, 0, a1,//黄色——面4
            0, 0, 0, a1, 0, 0, 0, a1, 0, 0, 0, a1, 0, 0, 0, a1, 0, 0, 0, a1, 0, 0, 0, a1,//黑色——面5
            1, 1, 1, a1, 1, 1, 1, a1, 1, 1, 1, a1, 1, 1, 1, a1, 1, 1, 1, a1, 1, 1, 1, a1, //白色——面6
            //        立方体2，不透明，A分量为1
            0, 1, 0, a2, 0, 1, 0, a2, 0, 1, 0, a2, 0, 1, 0, a2, 0, 1, 0, a2, 0, 1, 0, a2,//绿色——面2
            1, 0, 0, a2, 1, 0, 0, a2, 1, 0, 0, a2, 1, 0, 0, a2, 1, 0, 0, a2, 1, 0, 0, a2,//红色——面1
            0, 0, 1, a2, 0, 0, 1, a2, 0, 0, 1, a2, 0, 0, 1, a2, 0, 0, 1, a2, 0, 0, 1, a2,//蓝色——面3

            0, 0, 0, a2, 0, 0, 0, a2, 0, 0, 0, a2, 0, 0, 0, a2, 0, 0, 0, a2, 0, 0, 0, a2,//黑色——面5
            1, 1, 0, a2, 1, 1, 0, a2, 1, 1, 0, a2, 1, 1, 0, a2, 1, 1, 0, a2, 1, 1, 0, a2,//黄色——面4
            1, 1, 1, a2, 1, 1, 1, a2, 1, 1, 1, a2, 1, 1, 1, a2, 1, 1, 1, a2, 1, 1, 1, a2 //白色——面6
        ]);

        var canvasElement = document.getElementById('webgl');
        var gl = canvasElement.getContext('webgl');

        /**
         * 渲染管线α混合功能单元配置
         **/
        gl.enable(gl.DEPTH_TEST);
        gl.enable(gl.BLEND);
        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

        var program1 = initShader(gl, vertex, fragment);
        var program2 = initShader(gl, vertex, fragment);
        /**
         创建缓冲区colorBuffer，传入顶点颜色数据colorData
         **/
        var colorBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, colorData, gl.STATIC_DRAW);
        var a_color1 = gl.getAttribLocation(program1, 'a_color');
        gl.vertexAttribPointer(a_color1, 4, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_color1);

        var a_color2 = gl.getAttribLocation(program2, 'a_color');
        gl.vertexAttribPointer(a_color2, 4, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_color2);

        /**
         创建缓冲区buffer，传入顶点位置数据data
         **/
        var buffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
        var aposLocation1 = gl.getAttribLocation(program1, 'apos');
        gl.vertexAttribPointer(aposLocation1, 3, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(aposLocation1);
        
        var aposLocation2 = gl.getAttribLocation(program2, 'apos');
        gl.vertexAttribPointer(aposLocation2, 3, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(aposLocation2);

        var angle = Math.PI / 4;//起始角度
        var angleSpeed = Math.PI / 30000;//角速度Math.PI/3000弧度每毫秒
        var T0 = new Date();//上次时间

        var yangle1 = gl.getUniformLocation(program1, 'yagl');
        var yangle2 = gl.getUniformLocation(program2, 'yagl');
        function draw() {
            gl.clear(gl.COLOR_BUFFER_BIT);//清空画布上一帧图像
            /**时间计算**/
            var T1 = new Date();//本次时间
            var t = T1 - T0;//时间差（t的单位ms）
            T0 = T1;//把本次时间赋值给上次时间
            /**
             * 立方体绕y轴旋转
             ***/
            angle += t * angleSpeed;//时间差乘以角速度
            var sin = Math.sin(angle);
            var cos = Math.cos(angle);
            gl.useProgram(program1);
            gl.uniform2f(yangle1, sin, cos);

            /**执行绘制命令**/
            gl.depthMask(true);//关闭深度缓冲区
            gl.drawArrays(gl.TRIANGLES, 36, 36);//绘制不透明的立方体
            
            angle += t * angleSpeed;
            var sin = Math.sin(angle);
            var cos = Math.cos(angle);
            gl.useProgram(program2);
            gl.uniform2f(yangle2, sin, cos);

            gl.depthMask(true);//关闭深度缓冲区
            gl.drawArrays(gl.TRIANGLES, 0, 36);//绘制透明的立方体

            requestAnimationFrame(draw);
        }

        draw();

    </script>

</body>

</html>